<template>
	<view class="index-container safe-Area-Inset-Bottom" v-if="isLoading">
		<!-- 顶部导航栏目 -->
		<unt-tab-nav title="Meet商城"></unt-tab-nav>
		<view class="search flex-sb" @click="toSearch">
			<u-search placeholder="请输入关键字..." disabled height="30" :clearabled="true" :showAction="false"
				v-model="keyword">
			</u-search>
		</view>
		<!-- 轮播图 -->
		<view class="swiper">
			<u-swiper :height="swiper.height" imgMode="heightFix" radius="0" :list="swiper.list"
				@change="e => swiper.current = e.current" :autoplay="true" :circular="true" @click="swiperClick">
				<view slot="indicator" class="indicator">
					<view class="indicator__dot" v-for="(item, index) in swiper.list" :key="index"
						:class="[index === swiper.current && 'indicator__dot--active']">
					</view>
				</view>
			</u-swiper>
		</view>
		<!-- 分类 -->
		<view class="cate-menu">
			<view class="item" v-for="(item,index) in cateData.slice(0,10)" :key="index">
				<navigator :url="`/pages/categorize/cateshop/cateshop?id=${item.id}`">
					<view class="item-image">
						<image class="image" :src="item.image.url">
						</image>
					</view>
					<view class="item-text">{{item.name}}</view>
				</navigator>
			</view>
		</view>
		<!-- 限时秒杀 -->
		<view class="time-seckill" v-if="seckill.data.length">
			<view class="title flex-sb">
				<text class="text">限时秒杀</text>
				<view class="time flex-start">
					<text class="time-text">倒计时</text>
					<u-count-down :time="seckill.time" format="HH:mm:ss" autoStart millisecond @change="seckTime">
						<view class="time-count">
							<view class="time-count__custom">
								<text
									class="time-count__custom__item">{{seckill.timeData.hours>10?seckill.timeData.hours:'0'+seckill.timeData.hours}}</text>
							</view>
							<text class="time-count__doc">:</text>
							<view class="time-count__custom">
								<text
									class="time-count__custom__item">{{ seckill.timeData.minutes>10?seckill.timeData.minutes:'0'+seckill.timeData.minutes }}</text>
							</view>
							<text class="time-count__doc">:</text>
							<view class="time-count__custom">
								<text
									class="time-count__custom__item">{{ seckill.timeData.seconds>10?seckill.timeData.seconds:'0'+seckill.timeData.seconds }}</text>
							</view>
						</view>
					</u-count-down>
				</view>
			</view>
			<view class="seckill-content">
				<u-scroll-list :indicator="seckill.indicator" indicatorColor="#fff0f0" indicatorActiveColor="#fc493e">
					<view class="item" v-for="(item,index) in seckill.data" :key="index"
						@click="toShopDetails(item.goodsId)">
						<view class="item-image">
							<image class="image" :src="item.image.url" mode="scaleToFill"></image>
						</view>
						<view class="item-desc">{{item.goodsName}}</view>
						<view class="item-price-cart flex-sb">
							<view class="price">¥<text class="price-num">{{item.goodsPriceMin}}</text></view>
							<view class="cart">
								<unt-icon name="icon-cart-fill" color="#fff" size="14"></unt-icon>
							</view>
						</view>
					</view>
				</u-scroll-list>
			</view>
		</view>
		<!-- 为您推荐 -->
		<view class="sell">
			<view class="sell-menu flex-sb">
				<view class="item" :class="sell.active==item.id&&'active'" v-for="(item,index) in sell.menu"
					:key="index" @click="sellChange(item.id)">
					<view class="item-title">{{item.name}}</view>
					<view class="item-desc">{{item.description}}</view>
				</view>
			</view>
			<unt-shop-list :data="sell.data"></unt-shop-list>
		</view>
		<!--  -->
		<unt-tab-bar :index="0"></unt-tab-bar>
		<!-- 返回顶部 strat -->
		<unt-back-top :scrollTop="scrollTop"></unt-back-top>
		<!-- 返回顶部 end-->
		<!-- 优惠劵 -->
		<couponPrompt></couponPrompt>
	</view>
</template>

<script>
	import Config from '@/core/config'
	import * as Cate from '@/api/cate/index.js'
	import * as Goods from '@/api/goods/index.js'
	import * as Perom from '@/api/promotion/index.js'
	let lastRefreshTime;
	export default {
		data() {
			return {
				scrollTop: 0,
				isLoading: false,
				options: {},
				keyword: '',
				// 轮播图
				swiper: {
					height:500,
					data: [],
					current: 0,
					list: []
				},
				// 分类菜单
				cateData: [],
				isLoading: false,
				// 限时秒杀
				seckill: {
					time: '',
					timeData: {},
					indicator: true,
					data: []
				},
				// 为您推荐
				sell: {
					active: 46,
					menu: [],
					data: []
				},
				// 
				isLoadMore:false,
				page:{
					pageNo:1,
					pageSize:10,
					max:2
				}
			}
		},
		onLoad(options) {
			// this.$unts.navTo("pages_order/orderExpress/orderExpress")
			// 当前页面参数
			this.options = options
			// 加载页面数据
			this.onRefreshPage();
		},
		onShow() {
			// 每间隔5分钟自动刷新一次页面数据
			const curTime = new Date().getTime()
			if ((curTime - lastRefreshTime) > 5 * 60 * 1000) {
				this.onRefreshPage()
			}
		},
		methods: {
			swiperClick(e) {
				const g = this.swiper.data.goodsList[e];
				if(g){
					this.toShopDetails(g.goodsId);
				}else{
					uni.previewImage({
						current: e,
						urls: this.swiper.list, 
						loop:true
					})
				}
			},
			// 刷新页面
			async onRefreshPage() {
				// 记录刷新时间
				lastRefreshTime = new Date().getTime()
				// 获取页面数据
				await this.getPageData()
			},
			 getPageData() {
				const app = this
				Promise.all([Cate.categoryTree(), Perom.rotation(), Perom.seckill(), Perom.promotionType(), app
						.handleSearchData()
					])
					.then(result => {
						// 初始化分类列表数据
						app.cateData = result[0].data;
						app.swiper.data = result[1].data[0];
						app.swiper.list = result[1].data[0].imageUrl.split(',');
						this.jsImageWidth(app.swiper.list[0]);
						app.seckill.data = result[2].data.list[0].goodsList;
						app.seckill.time = app.timeConvert( result[2].data.list[0].endTime);
						app.sell.menu = result[3].data;
					}).finally(() => app.isLoading = true)
			},
			sellChange(index) {
				this.sell.active = index;
				this.handleSearchData();
			},
			handleSearchData(){
				this.sell.data=[];
				this.page={
					pageNo:1,
					pageSize:10,
					max:2
				};
				this.getRotationGoods();
			},
			getRotationGoods() {
				const app=this;
				const j={
						typeId: app.sell.active,
						appPageSize:app.page.pageSize,
						appPageNum:app.page.pageNo
					};
				Perom.rotationGoods(j).then(res => {
					app.sell.data =[...app.sell.data,...res.data.list[0].goodsList];
					app.page.max=res.data.totalPage;
					app.isLoadMore = false;
				})
			},
			toShopDetails(ids) {
				this.$unts.navTo("pages_moon/goods/detail/detail", {
					id: ids
				})
			},
			toSearch() {
				uni.navigateTo({
					url: "/pages_moon/search/search"
				})
			},
			seckTime(e) {
				this.seckill.timeData = e
			},
			timeConvert(endTime) {
				// 将字符串转换为日期对象
				const currentTime = new Date();
				const endDate = new Date(endTime);
				const timeDiff = endDate.getTime() - currentTime.getTime();
				return timeDiff;
			},
			jsImageWidth(src) {
				const app = this;
				uni.getImageInfo({
					src,
					success(r) {
						const hieght = uni.upx2px(750) / r.width * r.height;
						app.swiper.height = hieght;
					}
				})
			}
		},
		/**
		 * 分享到朋友圈
		 * 本接口为 Beta 版本，暂只在 Android 平台支持，详见分享到朋友圈 (Beta)
		 * https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share-timeline.html
		 */
		onShareAppMessage() {
			return {
				title: Config.get('name'),
				path: '/pages/index/index'
			}
		},
		onShareTimeline() {
			return {
				title: Config.get('name'),
				path: '/pages/index/index'
			}
		},
		/**
		 * 下拉刷新
		 */
		onPullDownRefresh() {
			// 获取首页数据
			this.getPageData(() => {
				uni.stopPullDownRefresh()
			})
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onReachBottom() {
			const app=this;
			if(!app.isLoadMore&&app.page.pageNo<app.page.max){
			    app.isLoadMore=true
			    app.page.pageNo+=1;
			    this.getRotationGoods();
			}
		}
	}
</script>

<style lang="scss">
	@import "./css/index.scss"
</style>